<template>
    <div class="app-container dashboard-container">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card>
                    <template #header>
                        <h2 class="card-title"><span class="title-arrow">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><span class="title-text">设备总览</span><span class="title-arrow">&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></h2>
                        <div class="card-box">
                            <el-row>
                                <el-col :span="8">
                                    <div class="circle-container">
                                        <div class="outer-circle"></div>
                                        <div class="inner-circle">
                                            <el-text class="number">66</el-text>
                                        </div>
                                    </div>
                                    <div class="circle-text">设备总数</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="circle-container">
                                        <div class="outer-circle"></div>
                                        <div class="inner-circle">
                                            <el-text class="number-success">56</el-text>
                                        </div>
                                    </div>
                                    <div class="circle-text">设备在线</div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="circle-container">
                                        <div class="outer-circle"></div>
                                        <div class="inner-circle">
                                            <el-text class="number-danger">10</el-text>
                                        </div>
                                    </div>
                                    <div class="circle-text">设备离线</div>
                                </el-col>
                            </el-row>
                            
                        </div>
                    </template>
                </el-card>
                <el-card>
                    <template #header>
                        <h2 class="card-title"><span class="title-arrow">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><span class="title-text">设备分类</span><span class="title-arrow">&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></h2>
                    </template>
                    <div class="card-box" id="device-classification-chart"></div>
                </el-card>
                <el-card>
                    <template #header>
                        <h2 class="card-title"><span class="title-arrow">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><span class="title-text">报警信息</span><span class="title-arrow">&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></h2>
                    </template>
                    <el-table :data="alarmData" style="width: 100%">
                        <el-table-column prop="name" label="设备" width="130"></el-table-column>
                        <el-table-column prop="location" label="位置" width="160"></el-table-column>
                        <el-table-column prop="time" label="时间" width="180"></el-table-column>
                        <el-table-column prop="status" label="状态" width="80"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <template #header>
                        <h2 class="card-title"><span class="title-arrow">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><span class="title-text">内部监控画面</span><span class="title-arrow">&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></h2>
                    </template>
                    <div class="map-container">
                        <div style="text-align: center;">{{ currentTime }}</div>
                        <img :src="jiankongImgUrl" alt="导航图" style="width: 100%; height: 100%;"></img>
                    </div>
                </el-card>
                <el-card>
                    <template #header>
                        <h2 class="card-title"><span class="title-arrow">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><span class="title-text">人员进出统计</span><span class="title-arrow">&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></h2>
                    </template>
                    <div class="card-box" id="enter-leave-chart"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <template #header>
                        <h2 class="card-title"><span class="title-arrow">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><span class="title-text">实时温度仪表盘</span><span class="title-arrow">&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></h2>
                    </template>
                    <div class="card-box" id="env-wendu-chart"></div>
                </el-card>
                <el-card>
                    <template #header>
                        <h2 class="card-title"><span class="title-arrow">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><span class="title-text">空气湿度曲线图</span><span class="title-arrow">&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></h2>
                    </template>
                    <div class="card-box" id="env-shidu-chart"></div>
                </el-card>
                <el-card>
                    <template #header>
                        <h2 class="card-title"><span class="title-arrow">&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;</span><span class="title-text">档案柜开关统计</span><span class="title-arrow">&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;</span></h2>
                    </template>
                    <div class="card-box" id="open-close-chart"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import moment from 'moment';
import { getRepository } from "@/api/manage/repository";
const { proxy } = getCurrentInstance();
const currentTime = ref(moment().format('YYYY-MM-DD HH:mm:ss'))
const jiankongImgUrl = ref("https://img1.baidu.com/it/u=3354487383,1207299464&fm=253&fmt=auto&app=138&f=JPEG?w=1185&h=800")
const alarmData = ref([
    {
        name: '温度传感器',
        location: '一层档案储藏室',
        time: '2024-09-25 20:50:48',
        status: '报警'
    },
    {
        name: '湿度传感器',
        location: '二层档案储藏室',
        time: '2024-11-30 08:29:47',
        status: '离线'
    },
    {
        name: '水浸传感器',
        location: '一层档案储藏室',
        time: '2024-11-05 20:30:46',
        status: '报警'
    },
    {
        name: '氧气浓度传感器',
        location: '一层档案储藏室',
        time: '2024-08-13 17:54:03',
        status: '离线'
    }
])

let deviceClassificationChart = null;

const initDeviceClassificationChart = () => {
    let chartDom = document.getElementById('device-classification-chart');
    if (chartDom) {
        deviceClassificationChart = echarts.init(chartDom);
        let option = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '设备分类',
                    type: 'pie',
                    radius: '100%',
                    data: [
                        { value: 13, name: '温湿度传感器' },
                        { value: 8, name: '空气质量传感器' },
                        { value: 10, name: '红外传感器' },
                        { value: 15, name: '烟雾探测器' },
                        { value: 6, name: '空调机' },
                        { value: 3, name: '一体机' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        deviceClassificationChart.setOption(option);
    } else {
        console.error('DOM element with id "device-classification-chart" not found');
    }
};

let enterLeaveChart = null;

const initEnterLeaveChart = () => {
    let chartDom = document.getElementById('enter-leave-chart');
    if (chartDom) {
        enterLeaveChart = echarts.init(chartDom);
        let option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['日期', '进入', '离开'],
                source: [
                    { 日期: '2025-01-10', '进入': 10, '离开': 10 },
                    { 日期: '2025-01-11', '进入': 8, '离开': 8 },
                    { 日期: '2025-01-12', '进入': 4, '离开': 4},
                    { 日期: '2025-01-13', '进入': 7, '离开': 3 }
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }]
        };
        enterLeaveChart.setOption(option);
    }
};

let openCloseChart = null;

const initOpenCloseChart = () => {
    let chartDom = document.getElementById('open-close-chart');
    if (chartDom) {
        openCloseChart = echarts.init(chartDom);
        let option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['日期', '打开', '关闭'],
                source: [
                    { 日期: '2025-01-10', '打开': 21, '关闭': 21 },
                    { 日期: '2025-01-11', '打开': 14, '关闭': 12 },
                    { 日期: '2025-01-12', '打开': 18, '关闭': 20},
                    { 日期: '2025-01-13', '打开': 27, '关闭': 23 }
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }]
        };
        openCloseChart.setOption(option);
    }
};

let envShiduChart = null;

const initEnvShiduChart = () => {
    let chartDom = document.getElementById('env-shidu-chart');
    if (chartDom) {
        envShiduChart = echarts.init(chartDom);
        let option = {
            xAxis: {
                type: 'category',
                data: ['10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [50, 46, 43, 51, 55, 53, 49],
                    type: 'line',
                    smooth: true
                }
            ]
        };
        envShiduChart.setOption(option);
    }

};

let envWenduChart = null;
const initEnvWenduChart = () => {
    let chartDom = document.getElementById('env-wendu-chart');
    if (chartDom) {
        envWenduChart = echarts.init(chartDom);
        let option = {
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    splitNumber: 12,
                    itemStyle: {
                        color: '#FFAB91'
                    },
                    progress: {
                        show: true,
                        width: 30
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 30
                        }
                    },
                    axisTick: {
                        distance: -45,
                        splitNumber: 5,
                        lineStyle: {
                            width: 2,
                            color: '#999'
                        }
                    },
                    splitLine: {
                        distance: -52,
                        length: 14,
                        lineStyle: {
                            width: 3,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: -20,
                        color: '#999',
                        fontSize: 20
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 60,
                        fontWeight: 'bolder',
                        formatter: '{value}°C',
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: 20
                        }
                    ]
                },
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    itemStyle: {
                        color: '#FD7347'
                    },
                    progress: {
                        show: true,
                        width: 8
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 20
                        }
                    ]
                }
            ]
        };
        envWenduChart.setOption(option);
    }
}

onMounted(() => {
    setInterval(() => {
        currentTime.value = moment().format('YYYY-MM-DD HH:mm:ss');
        const random = +(25 + Math.random()*3).toFixed(0);
        envWenduChart.setOption({
            series: [
                {
                    data: [
                        {
                            value: random
                        }
                    ]
                },
                {
                    data: [
                        {
                            value: random
                        }
                    ]
                }
            ]
        });
    }, 1000);
    nextTick(() => {
        initDeviceClassificationChart();
        initEnterLeaveChart();
        initEnvShiduChart();
        initEnvWenduChart();
        initOpenCloseChart()
    });
})
</script>

<style scoped>
.dashboard-container {
    width: 100%;
    height: 100vh;
    background-color: #f7f0f0;
    color: #1f1c1c;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.card-title {
    font-size: 20px;
    text-align: center;
}
.card-box {
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.title-text {
    font-size: 20px;
    color: #1f1c1c;
    margin-left: 10px;
    margin-right: 10px;
}
.title-arrow {
    font-size: 20px;
    color: #d6d0d0;
}

.circle-container {
    position: relative;
    width: 130px;
    height: 130px;
}

.outer-circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    border: 10px solid lightblue;
    border-style: dashed;
    animation: rotate 5s linear infinite;
}

.inner-circle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.number {
    font-size: 32px;
    color: rgb(0, 0, 0);
}

.number-success {
    font-size: 32px;
    color: rgb(4, 0, 255);
}

.number-danger {
    font-size: 32px;
    color: rgb(252, 1, 1);
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.circle-text {
    font-size: 16px;
    text-align: center;
}
</style>